<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="<?php echo $this->config->static_path; ?>/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.th {
	float: left;
	width: 80px;
	margin-top: 5px;
}

.left {
	float: left;
}

.clear {
	clear: both;
}
</style>
<script type="text/javascript">
    var config = {};
    config.base_path = '<?php echo $this->config->base_path; ?>';
</script>
</head>
<body>
	<div id="container">
		<div id="message-error" class="alert alert-block alert-error fade in"
			style="display: none">
			<button class="close" data-dismiss="alert">×</button>
			<h4 class="alert-heading">Có lỗi xảy ra...</h4>
			<p></p>
		</div>
		<form id="login-form" style="display: none">
			<div class="th">Email:</div>
			<div class="left">
				<input id="email" type="text" value="" name="email"
					placeholder="Email" />
			</div>
			<div class="clear"></div>
			<div class="th">Mật khẩu:</div>
			<div class="left">
				<input id="password" type="password" value="" name="password"
					placeholder="Mật khẩu" />
			</div>
			<div class="clear"></div>
			<div class="th">&nbsp;</div>
			<div>
				<input type="submit" class="btn btn-info" value="Đăng nhập"
					id="login" /> &nbsp; <a href="javascript:;" class="btn"
					data-toggle="modal" data-target="#register-form-modal">Đăng ký thẻ</a>
			</div>
		</form>
		<div class="modal hide" id="register-form-modal">
		    <form class="form-horizontal" action="<?php echo $this->config->base_path; ?>/default/index/register" id="register-form" method="post">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Đăng ký thẻ thư viện</h3>
			</div>
			<div class="modal-body">							
				<div class="control-group">
					<label class="control-label" for="Name">Họ tên</label>
					<div class="controls">
						<input type="text" class="input-xlarge" id="Name" name="Name">
						<!--<p class="help-block">Supporting help text</p>-->
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="Email">Email</label>
					<div class="controls">
						<input type="text" class="input-xlarge" id="Email" name="Email">
						<!--<p class="help-block">Supporting help text</p>-->
					</div>
				</div>		
				<div class="control-group">
					<label class="control-label" for="Password">Mật khẩu</label>
					<div class="controls">
						<input type="password" class="input-xlarge" id="Password" name="Password">
						<p class="help-block">Mật khẩu phải từ 6 ký tự trở lên</p>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="PasswordConfirm">Nhập lại mật khẩu</label>
					<div class="controls">
						<input type="password" class="input-xlarge" id="PasswordConfirm" name="PasswordConfirm">
						<!--<p class="help-block">Supporting help text</p>-->
					</div>
				</div>		
				<div class="control-group">
					<label class="control-label">Ngày sinh</label>
					<div class="controls">
					<select name="day" class="input-small">
					    <option value="0">Ngày</option>
						<?php for($d = 1; $d <= 31; $d++) { ?>
						    <option value="<?php echo $d; ?>"><?php echo $d; ?></option>
						<?php } ?>
					</select>
					<select name="month" class="input-small">
					    <option value="0">Tháng</option>
						<?php for($m = 1; $m <= 12; $m++) { ?>
						    <option value="<?php echo $m; ?>"><?php echo $m; ?></option>
						<?php } ?>
					</select>							
					<select name="year" class="input-small">
					    <option value="0">Năm</option>
						<?php $ty = date('Y'); for($y = $ty; $y >= $ty-100; $y--) { ?>
						    <option value="<?php echo $y; ?>"><?php echo $y; ?></option>
						<?php } ?>
					</select>														
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="IDNo">Số CMND</label>
					<div class="controls">
						<input type="text" class="input-xlarge" id="IDNo" name="IDNo">
						<!--<p class="help-block">Supporting help text</p>-->
					</div>
				</div>				
			</div>
			<div class="modal-footer">
			    <button class="btn btn-primary">Đăng ký</button>
				<a href="#" class="btn" data-dismiss="modal">Huỷ bỏ</a> 
			</div>
			</form>
		</div>
	</div>
	<script type="text/javascript"
		src="<?php echo $this->config->static_path; ?>/js/jquery-1.7.2.min.js"></script>
	<script
		src="<?php echo $this->config->static_path; ?>/js/bootstrap.min.js"></script>
	<script
		src="<?php echo $this->config->static_path; ?>/js/jquery.form.js"></script>
	<script type="text/javascript">
            $(function(){
                
                var $window = $(window);
                
                function _sendMessage(msg)
                {
                    $('#message-error').show().find('p').html(msg);
                }                

                $('#register-form').on('submit', function(e) {
                    e.preventDefault();
                    $(this).ajaxSubmit({
                        forceSync: true,
                        dataType: 'json',
                        beforeSubmit: function(){
                            
                        },
                        success: function(response, statusText, xhr, $form){                            
                        	if (response.status == 0)
                            {
                                alert(response.message);
                            }
        					else
        					{
        					    alert('Đăng ký thành công.\nBạn có thể sử dụng email và mật khẩu vừa đăng ký để đăng nhập.');
        					    $('#register-form-modal').modal('hide');
        					} 
                        }
                    });
                });
                
                $('#login-form').each(function(){                    
                    $(this).css("position","absolute")
                    .css("top", (($window.height() - $(this).outerHeight()) / 2) + $window.scrollTop() - 50 + "px")
                    .css("left", (($window.width() - $(this).outerWidth()) / 2) + $window.scrollLeft() + "px");
                }).show();                
                
                $('#login-form').on('submit', function(){
                    
                    var email = $('#email').val();
                    var password = $('#password').val();
                    
                    $.ajax({
                        url: config.base_path + '/index',
                        type: 'post',
                        async: false,                        
                        data: {
                            email : email,
                            password : password
                        },            
                        dataType: 'json',
                        beforeSend: function(){
                            
                            if (!email)
                            {                                
                                _sendMessage('Email không hợp lệ');
                                return false;
                            }
                            
                            if (!password)
                            {
                                _sendMessage('Mật khẩu không hợp lệ');
                                return false;
                            }
                        },
                        success: function(res){                            
                            if (res.status == 1)
                            {
                                switch (res.type)
                                {
                                    case "1":
                                        window.location.href = config.base_path + '/reader';
                                        break;
                                    case "2":
                                        window.location.href = config.base_path + '/librarian';
                                        break;
                                    default:
                                        break;
                                }
                            }
                            else
                            {
                                _sendMessage(res.message);
                            }
                        }
                    });

                    return false;
                    
                });               
            });           
        </script>
</body>
</html>
